---
title: Butang Sambungan Tersuai
description: Membuat Butang Sambungan Tersuai
---

# Butang Sambungan Tersuai

## Membuat Butang Sambungan Tersuai

Anda boleh menggunakan `ConnectButton.Custom` aras rendah untuk mencipta butang sambungan tersuai anda. Komponen ini memaparkan fungsi, yang merangkumi segala yang diperlukan untuk melaksanakan semula butang terbina dalam.

Pelaksanaan semula minimal butang terbina dalam akan kelihatan seperti ini:

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        authenticationStatus,
        mounted,
      }) => {
        // Note: If your app doesn't use authentication, you
        // can remove all 'authenticationStatus' checks
        const ready = mounted && authenticationStatus !== 'loading';
        const connected =
          ready &&
          account &&
          chain &&
          (!authenticationStatus ||
            authenticationStatus === 'authenticated');

        return (
          <div
            {...(!ready && {
              'aria-hidden': true,
              'style': {
                opacity: 0,
                pointerEvents: 'none',
                userSelect: 'none',
              },
            })}
          >
            {(() => {
              if (!connected) {
                return (
                  <button onClick={openConnectModal} type="button">
                    Connect Wallet
                  </button>
                );
              }

              if (chain.unsupported) {
                return (
                  <button onClick={openChainModal} type="button">
                    Wrong network
                  </button>
                );
              }

              return (
                <div style={{ display: 'flex', gap: 12 }}>
                  <button
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button"
                  >
                    {chain.hasIcon && (
                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: 'hidden',
                          marginRight: 4,
                        }}
                      >
                        {chain.iconUrl && (
                          <img
                            alt={chain.name ?? 'Chain icon'}
                            src={chain.iconUrl}
                            style={{ width: 12, height: 12 }}
                          />
                        )}
                      </div>
                    )}
                    {chain.name}
                  </button>

                  <button onClick={openAccountModal} type="button">
                    {account.displayName}
                    {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ''}
                  </button>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
};
```

Props berikut dihantar ke fungsi render anda.

### Sifat Akaun

<PropsTable
  data={[
    {
      name: 'account',
      required: false,
      type: 'object | undefined',
      description:
        'Objek yang mengandungi butiran tentang akaun semasa, diterangkan di bawah',
    },
    {
      name: 'account.address',
      required: false,
      type: 'string',
      description: (
        <>
          Alamat akaun penuh, e.g.
          "0x7a3d05c70581bD345fe117c06e45f9669205384f"
        </>
      ),
    },
    {
      name: 'account.balanceDecimals',
      required: false,
      type: 'string | undefined	',
      description: 'Baki akaun dalam angka perpuluhan',
    },
    {
      name: 'account.balanceFormatted',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Baki akaun diformatkan sebagai string, e.g.{' '}
          <code>1.234567890123456789</code>
        </>
      ),
    },
    {
      name: 'account.balanceSymbol',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Simbol mata wang untuk baki, e.g. <code>ETH</code>
        </>
      ),
    },
    {
      name: 'account.displayBalance',
      required: false,
      type: 'string',
      description: (
        <>
          Baki yang dipendekkan ke 3 digit ketara, ditambah simbol, e.g.{' '}
          <code>"1.23 ETH"</code>
        </>
      ),
    },
    {
      name: 'account.displayName',
      required: false,
      type: 'string',
      description: (
        <>
          Nama ENS, atau versi alamat yang dipendekkan, e.g.{' '}
          <code>"rainbowwallet.eth"</code> atau <code>"0x7a…384f"</code>
        </>
      ),
    },
    {
      name: 'account.ensAvatar',
      required: false,
      type: 'string	| undefined',
      description: 'URI avatar ENS',
    },
    {
      name: 'account.ensName',
      required: false,
      type: 'string	| undefined',
      description: (
        <>
          Nama ENS, e.g. <code>rainbowwallet.eth</code>
        </>
      ),
    },
    {
      name: 'account.hasPendingTransactions',
      required: false,
      type: 'boolean',
      description:
        'Boolean menunjukkan sama ada akaun mempunyai transaksi tertunda untuk rantaian semasa',
    },
  ]}
/>

### Sifat Rantaian

<PropsTable
  data={[
    {
      name: 'rantaian',
      required: false,
      type: 'object | undefined',
      description:
        'Objek yang mengandungi butiran tentang rantaian semasa, diterangkan di bawah',
    },
    {
      name: 'rantaian.adaIkon',
      required: false,
      type: 'boolean',
      description: 'Sama ada rantaian mempunyai ikon ditentukan',
    },
    {
      name: 'rantaian.urlIkon',
      required: false,
      type: 'string | undefined',
      description:
        'URL ikon rantaian (yang mungkin juga undefined semasa memuat turun data Base64)',
    },
    {
      name: 'rantaian.latarBelakangIkon',
      required: false,
      type: 'string | undefined',
      description:
        'Latar belakang ikon rantaian yang akan terlihat semasa imej sedang dimuat',
    },
    {
      name: 'rantaian.id',
      required: false,
      type: 'number',
      description: (
        <>
          ID rantaian, e.g. <code>1</code>
        </>
      ),
    },
    {
      name: 'rantaian.nama',
      required: false,
      type: 'string | undefined',
      description: (
        <>
          Nama rantaian, e.g. <code>"Ethereum"</code>
        </>
      ),
    },
    {
      name: 'rantaian.tidakDisokong',
      required: false,
      type: 'boolean | undefined',
      description:
        'Boolean menunjukkan sama ada rantaian semasa tidak disokong',
    },
  ]}
/>

### Sifat Negeri Modalk

<PropsTable
  data={[
    {
      name: 'bukaModalAkaun',
      required: false,
      type: '() => void',
      description: 'Fungsi untuk membuka modal akaun',
    },
    {
      name: 'bukaModalRantaian',
      required: false,
      type: '() => void',
      description: 'Fungsi untuk membuka modal rantaian',
    },
    {
      name: 'bukaModalSambungan',
      required: false,
      type: '() => void',
      description: 'Fungsi untuk membuka modal sambungan',
    },
    {
      name: 'modalAkaunBuka',
      required: false,
      type: 'boolean',
      description:
        'Boolean menunjukkan sama ada modal akaun dibuka',
    },
    {
      name: 'modalRantaianBuka',
      required: false,
      type: 'boolean',
      description: 'Boolean menunjukkan sama ada modal rantaian dibuka',
    },
    {
      name: 'modalSambunganBuka',
      required: false,
      type: 'boolean',
      description:
        'Boolean menunjukkan sama ada modal sambungan dibuka',
    },
  ]}
/>

### Sifat Negeri Umum

<PropsTable
  data={[
    {
      name: 'dipaparkan',
      required: false,
      type: 'boolean',
      description:
        'Boolean menunjukkan sama ada komponen telah dipasang',
    },
    {
      name: 'statusPengesahan',
      required: false,
      type: '"loading" | "unauthenticated" | "authenticated" | undefined',
      description:
        'Status pengesahan, atau undefined jika pengesahan belum dikonfigurasi',
    },
  ]}
/>
